<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>{{type == 'add' ? '新增' : '编辑'}}工资模板信息</span>
        <span
          class="el-icon-circle-close close-Btn-line"
          @click="closePOpup"
        ></span>
      </div>
      <div class="commentBody">
        <el-form label-width="120px" ref="editForm">
          <el-form-item label="模板名称：">
            <el-input placeholder="请输入模板名称..." v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="内容：">
            <el-button size="small" type="primary" @click="addTemp">新增</el-button>
            <el-table
              ref="multipleTable"
              :data="arryList"
              border
              size="small"
              tooltip-effect="dark"
              style="width: 100%"
              class="mt-10"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c"
            >
              <el-table-column
                align="center"
                width="80"
                label="序号"
                prop="name"
              >
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="名称">
                <template slot-scope="scope">
                  <el-input
                    class="listInputName"
                    v-model="scope.row.name"
                    placeholder="请输入名称..."
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="是否是实际工资">
                <template slot-scope="scope">
                  <el-radio-group
                    v-model="scope.row.is_money"
                    class="listRadio"
                    @input="changeRadio($event,'is_money',scope.$index)"
                  >
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column align="center" label="是否是姓名">
                <template slot-scope="scope">
                  <el-radio-group
                    v-model="scope.row.is_name"
                    class="listRadio"
                    @input="changeRadio($event,'is_name',scope.$index)"
                  >
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column align="center" width="80" label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="small"
                    @click="arryList.splice(scope.$index,1)"
                    type="danger"
                    plain
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">取消</el-button>
        <el-button size="small" @click="saveFn" type="primary"
          >确定并保存</el-button
        >
      </div>
    </div>
  </div>
</template>
  
  <script>
import {
    wagesTempAdd,wagesTempDetail,wagesTempEdit
} from "@/api/admin/wages"
export default {
  props: ["visible","type","ids"], // type = add 新增 = edit 编辑
  components: {},
  data() {
    return {
      dialogVisible: false,
      arryList: [],
      wordList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
      formData:{
        name:'',
        detail:'',
      }
    };
  },
  watch: {
    visible() {
        this.dialogVisible = this.visible;
        if(this.visible){
            console.log(this.type,'类型打印---------------')
            if(this.type == 'edit'){
              this.getDetail()
            }
        }else{
            this.formData = {
                name:'',
                detail:''
            }
            this.arryList = []
        }
    },
  },
  created() {},
  methods: {
    // 获取工资模板详情
    getDetail(){
      wagesTempDetail({id:this.ids}).then(res=>{
        let {code,vo} = res
        if(code == 0){
          this.formData.name = vo.name
          this.formData.detail = vo.detail ? JSON.parse(vo.detail) : ''
          this.arryList = []
          for(let val in  this.formData.detail ){
            this.arryList.push(this.formData.detail[val])
            console.log(val,'res135----------------')
          }
        }
      })
    },
    // 新增模板
    addTemp(){
        this.arryList.push({name:'',is_money:0,is_name:0})
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit("update:visible", false);
    },
    // 确定并保存
    saveFn(){
        console.log(this.arryList,'arrList打印---------')
        let Flag = false
        this.arryList.forEach((item)=>{
            if(!item.name){
                Flag = true
            }
        })
        if(!this.formData.name || !this.arryList.length || Flag ){
            return this.$message.error('表单数据不能为空！')
        }
        let obj = {}
    
        this.arryList.forEach((item,index)=>{
            // 循环将字母数组对应的值 赋给 obj对象 的key，同时赋值obj对象值，用来后面请求接口的格式
            obj[this.wordList[index]] = item
        })
        this.formData.detail = JSON.stringify(obj) 
        if(this.type == 'add'){
          wagesTempAdd(this.formData).then(res=>{
              console.log(res,'obj')
              if(res.code === 0){
                  this.$message.success('添加成功！')
                  this.$emit('refreshList')
              }else{
                  this.$message.error('添加失败！')
              }
              this.closePOpup()
          })
        }else{
          this.formData.id = this.ids
          wagesTempEdit(this.formData).then(res=>{
            console.log(res,'obj-edit')
              if(res.code === 0){
                  this.$message.success('编辑成功！')
                  this.$emit('refreshList')
              }else{
                  this.$message.error('编辑失败！')
              }
              this.closePOpup()
          })
        }


    },
    // 是否是实际工资 以及 是否是姓名 单选框组值发生改变
    changeRadio(e,key,index){
        if(e == 1){
            let isCheckFlag = false
            let isCheckIndex = null
            // 是否是实际工资 以及 是否是姓名 只允许有一个元素为是，若有其他行选择了是 ，另一个选择是的则改为否
            this.arryList.forEach((item,i)=>{
                if(item[key] == 1 && index != i){
                    isCheckFlag = true
                    isCheckIndex = i
                }
            })
            if(isCheckFlag){
                this.$set(this.arryList[isCheckIndex],key,0)
            }
        }
    }
  },
  mounted() {},
};
</script>
  <style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 900px;
  height: 750px;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.resruitment-title {
  padding: 5px 0;
  border-bottom: 2px solid #abd3f3;
  margin-bottom: 20px;
}

.el-radio {
  margin-right: 20px;
}

.jobTime {
  display: flex;
  align-items: center;
}

.jobTime span {
  padding: 0 10px;
}
.listBox {
}
.tableHead {
  display: flex;
}
.tableHead div {
  width: 200px;
  text-align: center;
}
.list {
  display: flex;
  align-items: center;
}
</style>
  
  
  